<template lang="">
  <div class="box" ref="box">
    
    
  </div>
</template>
<script>
// import * as echarts from "echarts"
export default {
  name: "BarOne",
  mounted() {
    let myChart = echarts.init(this.$refs.box)
    let option = {
      //标题
      title: {
        text: "新增确诊TOP10",      //标题内容
        left: "50%",                //标题位置
        textAlign: "center",        //文字居中
        textStyle: {                //文字样式
          color: "#fff"
        }
      },
      //网格
      grid: {
        left:50,          //网格位置
        bottom: 25
      },
      //x轴
      xAxis: {
        type: "category",     //类目轴
        data: ['英国', '美国', '法国', '德国', '乌克兰', '俄罗斯', '中国', '韩国', '日本', '云南'],
        //x轴线
        axisLine:{
          show:false
        },
        //x刻度
        axisTick:{
          show:false
        },
        // axisLabel:{
        //   color:"red",
        //   fontSize:20
        // }
      },
      //y轴
      yAxis: {
        type: "value",        //数值轴
        //分割线
        splitLine:{
          //分割线样式
          lineStyle:{
            color:"#121c45"
          }
        },
        //y轴轴线
        axisLine:{
          show:true,
          lineStyle:{
            color:"#192047"
          }
        },
        //y轴标签
        axisLabel:{
          color:"#757b90"
        }
      },
      //系列
      series: [
        {
          type: "bar",      //柱状图
          data: [
            { name: "英国", value: 40000 },
            { name: "美国", value: 38000 },
            { name: "法国", value: 30000 },
            { name: "德国", value: 28000 },
            { name: "乌克兰", value: 26000 },
            { name: "俄罗斯", value: 24000 },
            { name: "中国", value: 20000 },
            { name: "韩国", value: 19000 },
            { name: "日本", value: 17000 },
            { name: "云南", value: 20000 },
          ],
          //柱状图宽度
          barWidth:10,
          //柱状图样式
          itemStyle:{
            borderRadius:10,      //圆角
            color:"#2f89cf"       //填充色
          }
        }
      ]

    }
    myChart.setOption(option)


  }
}
</script>
<style lang="less" scoped>
.box {
  height: 3.125rem;
  // border:1px solid #fff;
}
</style>